<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>SpringBoot接口限流、防重放攻击与签名验证实战</title>
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<h1>SpringBoot接口限流、防重放攻击与签名验证实战</h1>
<div class="container">
    <div class="top-content">
        <div class="signContent" id="signContent">
            <div class="header-content">
                <h3>公有header</h3>
                <div class="main-header-content">
                    <div class="item">
                        <span class="label">appId：</span>
                        <input type="text" id="appId" onkeyup="flushSign()"/>
                    </div>
                    <div class="item">
                        <span class="label">appSecret：</span>
                        <input type="text" id="appSecret" onkeyup="flushSign()"/>
                    </div>
                    <div class="item">
                        <span class="label">timestamp时间戳：</span>
                        <input type="text" id="timestamp" onkeyup="flushSign()"/>
                    </div>
                    <div class="item">
                        <span class="label">nonce随机数：</span>
                        <input type="text" id="nonce" onkeyup="flushSign()"/>
                    </div>
                </div>
            </div>
            <div class="main-sign-content">
                <div class="param">
                    <h3>私有header</h3>
                    <div class="private-header">
                        <span class="label">sign签名：</span>
                        <input type="text" class="sign" id="paramSign"/>
                    </div>
                    <h3>param方式</h3>
                    <div class="content">
                        <span>name:</span>
                        <span>
                        <input type="text" id="paramName" value="name123" onkeyup="flushSign()"/>
                    </span>
                    </div>
                    <button onclick="submitParam(false)">正常提交</button>
                    <button onclick="submitParam(true)">重放提交</button>
                </div>
                <div class="line"></div>
                <div class="body">
                    <h3>私有header</h3>
                    <div class="private-header">
                        <span class="label">sign签名：</span>
                        <input type="text" class="sign" id="bodySign"/>
                    </div>
                    <h3>body方式</h3>
                    <div class="content">
                        <div class="body-json">
                            <textarea id="bodyJson" cols="35" rows="6" onkeyup="flushSign()"></textarea>
                        </div>
                    </div>
                    <button onclick="submitBody(false)">正常提交</button>
                    <button onclick="submitBody(true)">重放提交</button>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-content">
        <div class="label">返回结果：</div>
        <textarea class="result" id="result" readonly></textarea>
    </div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
